<template>
  <div class="footerBox">
    <div class="footer">
      <!-- 左侧 -->
      <div class="left">
        <!-- 左 -->
        <div class="logoText">
          <!-- logo -->
          <div class="top">
            <img src="../../assets/newimg/logo.png" alt="" />
          </div>
          <!-- 文字 -->
          <div class="tel">
            <p class="fs14 df">电话：{{ fotTel }}</p>
            <p class="fs14">微信：{{ fotVx }}</p>
            <p class="fs14">邮箱：{{ fotEmail }}</p>
          </div>
        </div>

        <!-- 右 -->
        <div class="code">
          <div class="bacr">
            <img
              :src="ip + fotImg"
              alt=""
              style="width: 110px; height: 110px; margin: 10px"
            />
          </div>

          <p>扫描添加客服微信</p>
        </div>
      </div>

      <!-- 中间 -->
      <div class="xian"></div>

      <!-- 右侧 -->
      <div class="right">
        <div>
          <div class="h4 fs14 w56">核心功能</div>
          <div class="heng mt15"></div>
          <div
            class="mt15 tac fs12"
            v-for="(value, key) in hx.value"
            :key="key"
          >
            <a :href="value" class="fff" target="_blank">{{ key }}</a>
            <br />
          </div>
        </div>

        <div style="margin-left: 90px">
          <div class="h4 fs14" style="width: 42px">大数据</div>
          <div class="heng mt15"></div>
          <div
            class="mt15 tac fs12"
            v-for="(value, key) in dsj.value"
            :key="key"
          >
            <a :href="value" class="fff" target="_blank">{{ key }}</a>
            <br />
          </div>
        </div>

        <div style="margin-left: 78px">
          <div class="h4 fs14 w56">解决方案</div>
          <div class="heng mt15"></div>
          <div
            class="mt15 tac fs12"
            v-for="(value, key) in jjfa.value"
            :key="key"
          >
            <a :href="value" class="fff" target="_blank">{{ key }}</a>
            <br />
          </div>
        </div>

        <div style="margin-left: 89px">
          <div class="h4 fs14 w56">行业导航</div>
          <div class="heng mt15"></div>
          <div
            class="mt15 tac fs12"
            v-for="(value, key) in hy.value"
            :key="key"
          >
            <a :href="value" class="fff" target="_blank">{{ key }}</a>
            <br />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="x"></div>
      <div class="text">
        <p>
          Copyright©2009
          <span>
            <a style="color: #fff" href="https://www.6ocbx.com">
              https://www.6ocbx.com
            </a>
          </span>
          All Rights Reserved
        </p>
        <p></p>
        <a href="https://beian.miit.gov.cn/" style="color: #fff">
          版权所有：六度标讯
          <span>
            <img
              src="../../assets/newimg/china.png"
              style="
                width: 12px;
                height: 12px;
                margin-right: 2px;
                margin-top: -3px;
              "
            />
          </span>
          <span> {{ fotBah }}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import "../../assets/com/com.scss";
import { footer } from "../../Api/market/index";

const fotTel = ref();
const fotVx = ref();
const fotEmail = ref();
const fotImg = ref();
const fotBah = ref();
const hx = reactive([]); //核心功能
const dsj = reactive([]); //大数据
const jjfa = reactive([]); //解决方案
const hy = reactive({}); //行业导航
const ip = ref("https://api.6ocbx.com/");
onMounted(() => {
  footer().then((res) => {
    // console.log(res.data.data, "底部");
    fotTel.value = res.data.data.footer_tel;
    fotVx.value = res.data.data.footer_vx;
    fotEmail.value = res.data.data.footer_email;
    fotImg.value = res.data.data.footer_img;
    fotBah.value = res.data.data.footer_bah;
    hx.value = res.data.data.hexin;
    dsj.value = res.data.data.shuju;
    jjfa.value = res.data.data.jiejue;
    hy.value = res.data.data.hangye;
  });
});
</script>

<style lang="scss" scoped>
.footerBox {
  // width: 1920px;
  width: 100%;
  height: 350px;
  background: #4d3b3b;
  color: #fff;
  border-radius: 0px;
  box-sizing: border-box;
  .footer {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    .left {
      display: flex;
      .logoText {
        padding-top: 57px;
        .top {
          width: 148px;
          height: 70px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .tel {
          padding-top: 38px;
          p {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            padding: 15px 0 0 0;
            color: #ffffff;
          }
        }
      }
      .code {
        padding-top: 60px;
        padding-left: 138px;
        .bacr {
          width: 130px;
          height: 130px;
          background: url(../../assets/img/fff.png) no-repeat;
          background-size: 100% 100%;
        }
        p {
          padding-top: 15px;
          font-size: 14px;
          text-align: center;
        }
      }
    }
    .xian {
      width: 1px;
      height: 100px;
      // background: red;
      margin-left: 126px;
      margin-top: 83px;
    }

    .right {
      margin-top: 50px;
      margin-left: 70px;
      display: flex;
      .heng {
        width: 20px;
        height: 2px;
        background: #ffffff;
        opacity: 1;
        border-radius: 0px;
        margin: 15px 18px 0 18px;
      }
    }
  }
  .bottom {
    // .x {
    //   width: 100%;
    //   height: 1px;
    //   background: #a9b1be;
    //   opacity: 1;
    //   border-radius: 0px;
    // }
    .text {
      // margin-top: 15px;
      text-align: center;
      font-size: 12px;
    }
  }
}
.fff {
  color: #fff;
}
</style>
